iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

前端藏寶圖系列 第 11

修改 DOM 元素樣式

  • 分享至 

  • xImage
  •  

在網頁的互動效果中,常常是當使用者符合了某個條件時,畫面上的元素產生令人驚喜的變化,這些變化可簡單可複雜,小至只有顏色的改變,大至元素形狀或位置的改變,目前學習到操作樣式的改變有兩種途徑:

  1. HTMLElement.style:只能針對指定的屬性做樣式修改,如果變化比較複雜,使用classList應該是比較好的做法

  2. Element.classList: 是Element物件定義的一個特性,它的值是一個可迭代的類陣列物件,並且有以下四種方法可以使用

    • add(): 增加指定的class name
    • remove() :移除指定的class name
    • contains() :確認是否包含括號內給定的class name
    • toggle() :有包含指定的 class name就移除,沒有的話就加上去

知道這些語法之後,腦袋一直浮現部落格常見的白天黑暗模式的切換鈕,所以決定用codepen練習一下。

首先我們先準備基本的切換鈕和示範用文章,下面是 HTML 結構:

<!--切換鈕-->
<div>
  <div class="bar">
    <span class="icon moon"><i class="far fa-moon"></i></span>
    <span class="icon sun"><i class="fas fa-sun"></i></span class="icon">
    <span class="base-mode"></span>
  </div>
</div>
<!--文章-->
<article>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum ipsam animi maiores, commodi nostrum eos. Lorem ipsum dolor sit amet.</p>
</article>

用CSS簡單美化一下變成這樣:

以下是待會要利用JS動態加到元素上的樣式

.dark {
  background-color: #222;
  color: #fff;
  transition: background-color 1s ease;
}

.slide {
  transform: translateX(60px);
  transition: all .5s;
}

前置準備好之後,我們要進入關鍵步驟了!來寫 JS ~

步驟 1: 先選取元素,並綁上監聽器

const button = document.querySelector('button');
button.addEventListener('click', changeMode);

步驟 2: 點擊button時,button會滑動

function changeMode(e) {
  if (e.target.tagName === 'BUTTON') {
    e.target.classList.toggle('slide')
    
    // 下一個步驟的程式碼
  }  
}

步驟 3: 改變背景和文字顏色

if (document.body.classList.contains('dark')) {
    document.body.classList.remove('dark')
} else {
    document.body.classList.add('dark')
}

//上面的if-else 可以用下面的toggle整個替代
document.body.classList.toggle('dark')

這樣就完成了~
/images/emoticon/emoticon42.gif
成品

雖然挺陽春的,但可以用學到的語法做出一個小小小功能真是太酷了~感覺就像彈吉他從練個別和絃到實際彈出一首完整的歌一樣~讓人心情愉悅~

參考資料:

JavaScript大全


上一篇
DOM 節點選取
下一篇
老大哥在看著你 - 事件與事件監聽
系列文
前端藏寶圖30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
南國安迪
iT邦新手 3 級 ‧ 2021-09-26 09:55:17

好有趣啊可惡

我要留言

立即登入留言